/**
 * v-copy
 * 复制某个值至剪贴板
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */
import type { Directive, DirectiveBinding } from "vue";
import { ElMessage } from "element-plus";
interface ElType extends HTMLElement {
  copyData: string | number;
  __handleClick__: any;
}
const copy: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    el.copyData = binding.value;
    el.addEventListener("click", handleClick);
  },
  updated(el: ElType, binding: DirectiveBinding) {
    el.copyData = binding.value;
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener("click", el.__handleClick__);
  },
};

function handleClick(this: any) {
  if (!this.copyData) return ElMessage({ type: "error", message: "复制失败，内容为空" });
  // 优先使用现代 Clipboard API
  if (navigator.clipboard) {
    try {
      navigator.clipboard.writeText(this.copyData);
    } catch (error: any) {
      ElMessage({ type: "error", message: `复制失败：${error?.name}` });
    }
  } else {
    const input = document.createElement("input");
    input.value = this.copyData.toLocaleString();
    document.body.appendChild(input);
    input.select();
    // input.setSelectionRange(0, 9999); // 限制选择内容大小
    if (document.execCommand) document.execCommand("Copy");
    document.body.removeChild(input);
  }
  ElMessage({ type: "success", message: "复制成功" });
}

export default copy;
